<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>流水查询</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
  </head>
  <style>
    .col-md-2{
      padding: 0;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }
    .name{
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #ddd;
    }
    .form-group{
      margin-bottom: 5px;
    }
    .col-md-3{
      padding: 0;
    }
    .col-md-2{
      padding: 0;
      float: left;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }
    .on{
      background-color: #f5f5f5;
    }
    .title{
      border-right:1px solid #ddd ;
      background-color: #f1f1f1;
    }
    .col-md-2{
      padding: 0;
    }
    .col-md-9{
      top: -28px;
      left: 10%
    }
    .col-md-6{
      left: -4%;
    }
    .companyname{
      height: 30px;
      font-size: 15px;
      line-height: 30px;
      padding-left: 10px;
    }
    .nocompany,.yescompany{
      /*border: 1px solid #ddd;*/
      margin-bottom: 10px;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }

    .able-outer-container,.able-select-area {
      width: 370px;
      height: 100px;
    }
    .able-outer-container {
      overflow: hidden;
    }
    .able-inner-container {
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .able-inner-container::-webkit-scrollbar {
      display: none;
    }
    .mod-1{
      position: relative;
      top: 40px;
      left: 20px;
      border: 1px solid #ddd;
      width: 16%;
      height: 750px;
      float: left;
    }
    .rec{
      min-height: 450px;
      border: 1px solid #ddd;
      float: left;
      border-radius: 10px !important;
      background-color: #f6f6f6;
    }
    .col-msg{
      float: left;
    }
    .msg-val{
      position: relative;
      height: 37px;
    }
    .user{
      width: 100%;
      height: 28px;
      line-height: 28px;
      font-size: 15px;
    }
    .success{
      text-align: center;
      font-size: 25px;
      line-height: 80px;
      color: green;
    }
    .money{
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      background-color: #f6f6f6;
      text-align: center;
    }
    .on{
      background-color: #f5f5f5;
    }
    .portlet.light > .portlet-title > .caption > .caption-subject {
      font-size: 18px;
    }
    h5{
      margin-top: 13px;
      font-size: 14px;
      font-weight: 400;
    }
    .aa{
      height: 40px;
      width: 800px;
      background-color: red;
      position: absolute;
      z-index: 99;
    }
    .merchant-Msg{
      position: relative;
      top: 5px;
    }
    .able-a-merchant{
      position: relative;
      margin-top: 5px;
      color: #2488CC;
    }
    .dialog-hui{
      position: relative;
      width: 94%;
      left: 3%;
      top: 15px;
      height: 65%;
      border: 1px solid #e0e0e0;
    }
    .dialog-title{
      width: 100%;
      height: 20%;
      background-color: #f9f9f9;
    }
    .dialog-p{
      font-size: 16px;
      font-weight: 400;
      position: relative;
      left: 16px;
      top: 10px;
    }
    .dialog-p2{
      font-size: 14px;
      font-weight: 400;
      position: relative;
      left: 16px;
      top: 12px;
    }
    .dialog-box{
      width: 96%;
      height: 65%;
      top: 16px;
      position: relative;
      left: 2%;
      border: 1px solid;
    }
    .dialog-name{
      width: 100%;
      height: 33%;
      border-bottom: 1px solid;
    }
    .dialog-name2{
      width: 100%;
      height: 33%;
    }
    .box-name2{
      width: 16.5%;
      height: 100%;
      position: relative;
      float: left;
      background-color: #f5f5f5;
      border-right: 1px solid;
    }
    .box-name{
      width: 16.5%;
      height: 100%;
      background-color: #f5f5f5;
      float: left;
      border-right: 1px solid;
    }
    .box-name3{
      width: 17%;
      height: 100%;
      position: relative;
      background-color: #f5f5f5;
      border-right: 1px solid;
      float: left;
    }
    .box-nameVal{
      height: 100%;
    }
    .box-nameVal2{
      height: 100%;
      position: relative;;
      width: 16.5%;
      float: left;
      border-right: 1px solid;
    }
    .box-nameVal3{
      width: 16.5%;
      height: 100%;
      position: relative;
      float: left;
    }
    .modal-lg {
      width: 1000px;
    }

    .form-control-feedback {
      line-height: 34px !important
    }
    .alarm{
    }
    .data-box{
      position: relative;
      width: 98%;
      left: 1%;
      margin-top: 22px;
    }
    .data-box2{
      position: relative;
      width: 98%;
      left: 1%;
    }
  </style>
  <body>
  <div class="page">
    <!-- Main Navbar-->
    <jsp:include page="header.jsp"></jsp:include>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <jsp:include page="left.jsp"></jsp:include>
      <div class="content-inner"  style="background-color: white">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">流水查询</h2>
          </div>
        </header>
        <div class="content-box" >
          <div class="col-md-12 modular " style="padding:0">
            <div class="caption"  style="float: right;margin-top: 10px;margin-right: 55px">
              <a href="" id="black_href"><button class="btn btn-sm" style="color: black">返 回</button></a>
            </div>
          </div>
          <div style="height: 55px"></div>
          <input value="" type="hidden" id="merchantid">
          <input value="" type="hidden" id="month">
          <input id="searchMerchantId" value="${id}" type="hidden">
          <input id="searchMon" value="${mon}" type="hidden">
          <div class="col-md-12 see" style="border: 1px solid #ddd;min-height: 600px;;margin-bottom: 15px;">
            <div class="portlet light">
              <div class="portlet-body" style="padding: 0">
                <div class="col-md-12">
                  <div class="col-md-12" style="margin-bottom: 10px">
                    <div class="caption"  style="font-size: 14px;padding-bottom: 0;font-weight: bold">
                      <!--<span>账户名称 : <span class="sename"></span></span>-->
                      <span style="margin-left: 15px">结算账单 :  <span class="setime"></span></span>
                      <div class="" style="float: right"> <button class="btn  btn-sm" onclick="printout()">打印账单</button></div>
                    </div>
                  </div>
                  <div class="col-md-12" id="settlement" style="margin-bottom: 10px;">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Page Footer-->
        <jsp:include page="footer.jsp"></jsp:include>
      </div>
    </div>
  </div>
    <!-- Main File-->
  <script>
    $("#query-menu").addClass('active');
  </script>
  <!--   Core JS Files   -->
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/layui/excel.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/FileSaver.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/jszip.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/xlsx.js"></script>
  <script type="text/javascript">
    var id = $("#searchMerchantId").val();
    var month = $("#searchMon").val();
    $("#black_href").attr("href","/query/queryPage?page=3&id="+id);
    $(".setime").text(month);
    var data={'month':month,'id':id};
    var url="/query/getquerybill";
    $.post(url,data,function(res) {
      var str='';
      $('#settlement').empty();
      str +=
              '<table id="print-content" border="1" width="100%"  cellpadding="0" cellspacing="0" style=\'border-collapse:collapse;table-layout:fixed;\'>\n' +
              '<tr height="45" style="text-align: center;font-size:14px">\n' +
              '<td colspan="2" class="on">计费项目</td>\n' +
              '<td colspan="2" class="on">表计</td>\n' +
              '<td colspan="2" class="on">前次读数</td>\n' +
              '<td colspan="2" class="on">今次读数</td>\n' +
              '<td colspan="2" class="on">实用</td>\n' +
              '<td colspan="2" class="on">计费金额</td>\n' +
              '</tr>';
      for(var i=0;i<res.data.selectList.length;i++){
        var data=res.data.selectList[i];
        var name;
        if (res.data.selectList[i].powertype==0){name="电子账户"}
        else if (res.data.selectList[i].powertype==1) {name="水子账户"}
        else if (res.data.selectList[i].powertype==2){name="气子账户"}
        str+=
                '<tr height="45" style="text-align: center;font-size:14px" class="elec getsing">\n' +
                '<td colspan="2" class="aaa">'+ name +'</td>\n' +
                '<td colspan="2" class="" id="">'+ data.code +'</td>\n' +
                '<td colspan="2" class="" id="elecbeforeReading">'+ data.beforereading +'</td>\n' +
                '<td colspan="2" class="" id="elecnowReading">'+data.nowreading+'</td>\n' +
                '<td colspan="2" class="" id="elecdosage">'+ data.powerusage +'</td>\n' +
                '<td colspan="2" class="cost" id="elecdue">'+data.cost+'</td>\n' +
                '</tr>\n';
      }
      str+=
              '<tr height="45" style="text-align: center;font-size:14px">\n' +
              '<td colspan="4" class="on">总计</td>\n' +
              '<td colspan="8" id="aggregate"></td>\n' +
              '</tr>\n' +
              '<tr height="45" style="text-align: center;font-size:14px">\n' +
              '<td colspan="4" class="on">结算后余额</td>\n' +
              '<td colspan="8" id="balance">'+res.data.balance+'</td>\n' +
              '</tr>\n' +
              '</table>';
      $('#settlement').html(str);
    },'json');

    setTimeout(function () {
      var aggregate=0;
      $('.cost').each(function () {
        aggregate+=$(this).text()*1;
      });
      $('#aggregate').text(aggregate);

    },500)
    //根据key,返回url中指定参数的value
    function getParameter(url,paramKey)
    {
      var paramValue = "";
      url = url.substr(url.indexOf("?")+1);
      var paramArray = new String(url).split("&");
      $.each(paramArray,function(i, paramStr){
        var params = paramStr.split("=");
        if(paramKey == params[0])
        {
          paramValue =  decodeURI(params[1]);
          return false;
        }
      });
      return paramValue;
    }
    function printout() {
      debugger;
      var newWindow;
      //打开一个新的窗口
      newWindow = window.open();
      // 是新窗口获得焦点
      newWindow.focus();
      //保存写入内容
      var newContent = "<extend name=\"Company:Public:base\" />";
      newContent += document.getElementById("settlement").outerHTML;
      newContent += "</body></html>"
      // 将HTML代码写入新窗口中
      newWindow.document.write(newContent);
      newWindow.print();
      // close layout stream
      newWindow.document.close();
      //关闭打开的临时窗口
      newWindow.close();
      return false;
    };
  </script>
  </body>
</html>